<header class="monitor-header">
  <!-- header-container -->
  <div class="header-container">
    <!-- header-box -->
    <div class="header-box">
      <!-- title-with-nav -->
      <div class="title-with-nav">
        <!-- part-title -->
        <div class="part-title">
          <h1>
            <span>Dev</span>
            <br class="divide-line" />
            <span>Community</span>
          </h1>
        </div>
        <!-- part-nav -->
        <nav class="part-nav">
          <ul>
            @for (tb of topBar; track tb.value){
            <li>
              <a [href]="'#' + tb.value">
                {{ tb.value }}
              </a>
            </li>
            }
          </ul>
        </nav>
      </div>
      <!-- part-search -->
      <div class="part-search">
        <!-- <button
            class="rounded-[8px] bg-purple-500 px-2 py-1 text-white xlr:hidden text-[12px]"
          >
            <span>智能</span>
            <span>创作</span>
          </button> -->
        <div class="searcher">
          <input type="text" placeholder="搜索" class="searcher-input" />
          <app-sn-search-icon></app-sn-search-icon>
        </div>
        <button class="side-btn">
          <span>创作</span>
          <span>中心</span>
        </button>
        <div class="notification">
          <!-- <Bell class="hover-with-theme text-gray-600" /> -->
          <app-sn-bell-icon></app-sn-bell-icon>
        </div>
        <div class="avatar">
          <img about="User avatar" src="/favicon.ico" alt="User avatar" />
          <!-- <ChevronDown class="hover-with-theme ml-1 size-6 text-gray-600 mdr:hidden" /> -->
          <app-sn-chevron-down-icon></app-sn-chevron-down-icon>
        </div>
      </div>
    </div>
  </div>
</header>
